<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    //组件具备复用性
    //全局组件，只要定义了，处处可以使用，性能不高，但使用起来简单
    // 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大些字母开头，驼峰命名
    // 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射
    const Num = {
      data() {
        return {
          num: 1
        }
      },
      template: `<div @click="num+=1">{{num}}</div>`
    }
    const HelloWorld = {
      template: `<div>helloWorld</div>`
    }
    const app = Vue.createApp({
      components: { Num, HelloWorld },
      data() {
        return {

        }
      },
      template: `
        <div>
          <counter/><counter/><counter/>
          <Num/>
          <helloWorld/>
        </div>`
    })

    app.component('counter', {
      data() {
        return {
          count: 1
        }
      },
      template: `<div @click="count+=1">{{count}}</div>`
    })
    const vm = app.mount('#root')
  </script>
</body>

</html>